﻿<!DOCTYPE html>
<html>
<head>
    <title>The if binding</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
    <h1>Sign in to the community day 2012!</h1>
    <p>Please provide your first and last name</p>
    <div>
        <p>
            <label>
                Is it friday yet?</label>
            <input type="checkbox" data-bind="checked: displayMessage" />

        </p>
    </div>
    <div>
        <p>
            <!--ifnot/if-->
            <span data-bind="if: displayMessage">
                <img src="" alt="" data-bind='attr: { src: picture }' />
            </span>

            <!-- ko if: displayMessage --> 
            <span>this is displayed by using containerless control flow syntax</span>
            <!-- /ko --> 
        </p>
    </div>
    <div class="buttonholder">
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>
    <script type="text/javascript">
        ko.applyBindings({
            displayMessage: ko.observable(false),
            picture: ko.observable("../images/metro.icons/white/share.png")
        });
    </script>

</body>
</html>
